<template>
  <view class="tui-searchbox">
    <view class="tui-search-input">
      <!-- #ifdef APP-PLUS || MP -->
      <icon type="search" :size="13" color="#333"></icon>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view>
        <tui-icon name="search" :size="16" color="#333"></tui-icon>
      </view>
      <!-- #endif -->
      <input
        ref="searchInput"
        class="tui-input"
        placeholder-class="tui-input-plholder"
        confirm-type="search"
        auto-focus
        :focus="focus"
        :placeholder="placeholder"
        v-model.trim="key"
        @confirm="confirm"
      />
      <!-- #ifdef APP-PLUS || MP -->
      <icon type="clear" :size="13" color="#bcbcbc" @tap="cleanKey" v-show="key"></icon>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view @tap="cleanKey" v-show="key">
        <tui-icon name="close-fill" :size="16" color="#bcbcbc"></tui-icon>
      </view>
      <!-- #endif -->
    </view>
    <view class="tui-cancle" hover-class="tui-btn-gray" @tap="tap">{{btnText}}</view>
  </view>
</template>

<script>
import tuiIcon from "@/components/icon/icon";
export default {
  name: "tuiSearchBoxBtn",
  components: { tuiIcon },
  props: {
    // 初始默认值
    value: {
      type: String,
      default: ""
    },
    // 按钮文字
    btnText: {
      type: String,
      default: "取消"
    },
    // 搜索框提示信息
    placeholder: {
      type: String,
      default: ""
    }
  },
  watch: {
    value() {
      this.key = this.value;
    },
    key() {
      this.$emit("input", this.key);
    }
  },
  data() {
    return {
      key: this.value,
      focus: true
    };
  },
  methods: {
    tap: function() {
      this.$emit("btn-tap", this.key);
    },
    confirm() {
      this.$emit("confirm", this.key);
    },
    cleanKey: function() {
      this.key = "";
      // 重新聚焦
      this.focus = false;
      this.$nextTick(function() {
        this.focus = true;
      });
      this.$emit("clear");
    }
  }
};
</script>

<style>
.tui-searchbox {
  padding: 30rpx 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #fff;
}

.tui-search-input {
  width: 100%;
  height: 66upx;
  border-radius: 35upx;
  padding: 0 30upx;
  box-sizing: border-box;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.tui-input {
  flex: 1;
  color: #333;
  padding: 0 16upx;
  font-size: 28upx;
}

.tui-input-plholder {
  font-size: 28upx;
  color: #b2b2b2;
}

.tui-cancle {
  color: #888;
  font-size: 28upx;
  padding: 0 30upx;
  flex-shrink: 0;
  height: 72rpx;
  line-height: 72rpx;
}
</style>